<template>
  <div class="app-container">
    <div class="clearfix">
      <div class="app-container-menus">
        <el-menu default-active="/system/ui_album" :router="true" class="el-menu-vertical-demo">
          <el-menu-item index="/system/ui_edit">
            <i class="el-icon-menu"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
          <el-menu-item index="/system/ui_album">
            <i class="el-icon-document"></i>
            <span slot="title">主题专区</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div>
        <div class="menu_setting_area" v-loading="isLoading">
          <div class="menu_preview_area">
            <div class="mobile_menu_preview">
              <div class="mobile_hd">主题专区</div>
              <div class="mobile_bd" ref="stage">
                <div class="cx himg-area box1" v-if="iconDisplayType==2">
                  <draggable
                    v-model="icons2"
                    @start="draggablestart"
                    :options="{animation: 150,draggable:'.himg'}"
                    @end="draggablend"
                  >
                    <div
                      class="himg box1"
                      @click.stop="toggleTopSelectedItem(icon)"
                      v-for="icon in icons2"
                      :key="icon.id"
                    >
                      <img
                        :src="icon.iconType==2?imgUrl(icon.customIcon||icon.imgSrc):icon.imgSrc"
                        alt
                        class="himg-img"
                      >
                      <div class="box1-pen" @click.stop="toggleTopSelectedItem(icon)"></div>
                    </div>
                  </draggable>
                  <div class="box1-pen" @click.stop="toggleIconDisplayType"></div>
                </div>
                <div class="cx himg-area box1" v-else-if="iconDisplayType==1">
                  <div
                    class="himg box1 box2"
                    @click.stop="toggleTopSelectedItem(icon)"
                    v-for="icon in icons1"
                    :key="icon.id"
                  >
                    <img
                      :src="icon.iconType==2?imgUrl(icon.customIcon||icon.imgSrc):icon.imgSrc"
                      alt
                      class="himg-img"
                    >
                    <div class="box1-pen" @click.stop="toggleTopSelectedItem(icon)"></div>
                  </div>
                  <div class="box1-pen" @click.stop="toggleIconDisplayType"></div>
                </div>
                <div class="cx himg-area box1" v-else-if="iconDisplayType==3">
                  <draggable
                    v-model="icons3"
                    @start="draggablestart"
                    :options="{animation: 150,draggable:'.box3'}"
                    @end="draggablend"
                  >
                    <div
                      class="himg box3"
                      :class="{box1:!icon.subButtons || !icon.subButtons.length}"
                      v-for="(icon,idx3) in icons3"
                      :key="idx3"
                    >
                      <template v-if="icon.subButtons && icon.subButtons.length">
                        <div class="himg box1" v-for="(sub,subIdx) in icon.subButtons" :key="subIdx" @click.stop="">
                          <img
                            :src="sub.iconType==2?imgUrl(sub.customIcon||sub.imgSrc):sub.imgSrc"
                            alt
                            class="himg-img himg-img-small"
                          >
                          <div class="box1-pen" @click.stop="toggleTopSelectedItem(sub)"></div>
                        </div>
                      </template>
                      <img
                        v-else
                        :src="icon.iconType==2?imgUrl(icon.customIcon||icon.imgSrc):icon.imgSrc"
                        alt
                        class="himg-img himg-img-big"
                      >
                      <div class="box1-pen" @click.stop="toggleTopSelectedItem(icon)"></div>
                    </div>
                  </draggable>
                  <div class="box1-pen" @click.stop="toggleIconDisplayType"></div>
                </div>
                <img src="../../assets/icons/album/hbzq.png" alt class="hbzq-title">
              </div>
            </div>
            <div class="toolbar-area">
              <el-button type="danger" @click="resetAll" icon="el-icon-refresh" size="mini">恢复初始设置</el-button>
              <!-- <el-button
                type="primary"
                @click="resetSortList"
                icon="el-icon-refresh"
                size="mini"
              >恢复排序</el-button>-->
            </div>
          </div>
          <div class="menu_form_area" v-if="currentSelectedItem">
            <div class="portable_editor to_left">
              <div class="editor_inner">
                <div class="global_mod float_layout menu_form_hd js_second_name_bar">
                  <h4 class="global_info">{{currentSelectedItem.editAlbum?'列表样式':"导航项"}}</h4>
                  <!-- <div class="global_extra">
                <a @click="doDeleteMenu" href="javascript:void(0);">删除导航项</a>
                  </div>-->
                </div>
                <div class="menu_form_bd">
                  <div class v-if="currentSelectedItem.editAlbum">
                    <div class="menu_holder">
                      <div class="label label-n">样式</div>
                      <div class="label-content">
                        <el-radio-group v-model="iconDisplayType">
                          <el-radio :label="1">单图</el-radio>
                          <el-radio :label="2">双图</el-radio>
                          <el-radio :label="3">三图</el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                  </div>
                  <template v-else>
                    <div class="menu_holder">
                      <div class="label">导航项名称</div>
                      <div class="label-content">
                        <el-input
                          class="label-content-input"
                          placeholder="请输入导航项名称"
                          v-model="currentSelectedItem.title"
                        ></el-input>
                        <div
                          class="label-content-error"
                          v-if="!currentSelectedItem.title || !currentSelectedItem.title.trim()"
                        >请输入导航项名称</div>
                        <!-- <div class="label-content-tip">字数不超过8个字</div> -->
                      </div>
                    </div>

                    <div class="menu_holder">
                      <div class="label label-n">图标样式</div>
                      <div class="label-content">
                        <el-radio-group v-model="currentSelectedItem.iconType">
                          <el-radio :label="0">默认</el-radio>
                          <!-- <el-radio :label="1">隐藏</el-radio> -->
                          <el-radio :label="2">自定义</el-radio>
                        </el-radio-group>
                        <div class="img-edit-area" v-if="currentSelectedItem.iconType===2">图片：
                          <el-upload
                            class="avatar-uploader"
                            :action="UPLOAD_URL"
                            :show-file-list="false"
                            :on-success="handleUploadCoverSuccess"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img
                              v-if="currentSelectedItem.customIcon"
                              :src="currentSelectedItem.customIcon|absUrl"
                              class="custom-icon"
                            >
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                        </div>
                      </div>
                    </div>
                    <div class="menu_holder">
                      <div class="label label-n">跳转方式</div>
                      <div class="label-content">
                        <el-radio-group v-model="currentSelectedItem.routerType">
                          <el-radio :label="0">不跳转</el-radio>
                          <!-- <el-radio :label="1">调用功能</el-radio> -->
                          <el-radio :label="2">跳转</el-radio>
                        </el-radio-group>
                        <div class="img-edit-area">
                          <div v-if="currentSelectedItem.routerType===1">调用功能：
                            <el-select v-model="currentSelectedItem.func">
                              <el-option value="qrcode" label="会员二维码"></el-option>
                            </el-select>
                          </div>
                          <div v-if="currentSelectedItem.routerType===2">跳转链接：
                            <el-input
                              class="label-content-input"
                              placeholder="请输入链接地址"
                              v-model="currentSelectedItem.link"
                            ></el-input>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <span class="editor_arrow_wrp">
                <i class="editor_arrow editor_arrow_out"></i>
                <i class="editor_arrow editor_arrow_in"></i>
              </span>
            </div>
          </div>
        </div>
        <div class="toolbar">
          <el-button type="success" @click="saveAndSubmit" :loading="isLoading" size="mini">保存并发布</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './main.scss'
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      currentSelectedItem: null,
      billData: {},
      userinfo: {},
      isLoading: false,
      iconDisplayType: 1,
      icons1: [
        {
          title: '热销商品',
          customIcon: '',
          iconType: 0,
          routerType: 2,
          // titleType: 0,
          imgClass: 'avartar-img-wrapper',
          link: '/shop?tj=1',
          imgSrc:
            'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com/oss-image/84446121540829892158.jpg'
        }
      ],
      icons3: [
        {
          title: '限时抢购',
          iconType: 0,
          customIcon: '',
          routerType: 2,
          imgClass: 'avartar-img-wrapper',
          link: '/xsqging',
          imgSrc:
            'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com/oss-image/679571540829922194.jpg'
        },
        {
          subButtons: [
            {
              title: '热销商品',
              customIcon: '',
              iconType: 0,
              routerType: 2,
              // titleType: 0,
              imgClass: 'avartar-img-wrapper',
              link: '/shop?tj=1',
              imgSrc:
                'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com/oss-image/84446121540829892158.jpg'
            },
            {
              title: '热销商品',
              customIcon: '',
              iconType: 0,
              routerType: 2,
              // titleType: 0,
              imgClass: 'avartar-img-wrapper',
              link: '/shop?tj=1',
              imgSrc:
                'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com/oss-image/84446121540829892158.jpg'
            }
          ]
        }
      ],
      icons2: [
        {
          title: '限时抢购',
          iconType: 0,
          customIcon: '',
          routerType: 2,
          imgClass: 'avartar-img-wrapper',
          link: '/xsqging',
          imgSrc:
            'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com/oss-image/679571540829922194.jpg'
        },
        {
          title: '热销商品',
          customIcon: '',
          iconType: 0,
          routerType: 2,
          // titleType: 0,
          imgClass: 'avartar-img-wrapper',
          link: '/shop?tj=1',
          imgSrc:
            'http://weixin-ostorage01.oss-cn-shenzhen.aliyuncs.com/oss-image/84446121540829892158.jpg'
        }
      ]
    }
  },
  mounted () {
    const stage = this.$refs.stage
    stage.addEventListener(
      'mouseout',
      evt => {
        const target = this.findBox1(evt.target)
        if (target == null) {
          return
        }
        this.onMouseLeave(target)
        // if (!this.hasParent(evt.toElement, target)) {

        // }
      },
      false
    )
    stage.addEventListener(
      'mouseover',
      evt => {
        const target = this.findBox1(evt.target)
        if (target == null) {
          return
        }
        this.onMouseEnter(target)
      },
      false
    )
    // dom.addEventListener('mouseleave', this.onMouseLeave.bind(this), false)
    // dom.addEventListener('mouseenter', this.onMouseEnter.bind(this), false)
  },
  created () {
    this.checkLogin()
    document.documentElement.style.fontSize = 414 / 10 + 'px'
    document.body.fontSize = '14px'
    this.loadIcons()
  },
  methods: {
    toggleIconDisplayType () {
      this.currentSelectedItem = {
        editAlbum: 1
      }
    },
    draggablestart () {
      // if (!this.oldSortedIcons) {
      //   this.oldSortedIcons = []
      //   this.icons.forEach(el => {
      //     this.oldSortedIcons.push(Object.assign({}, el))
      //   })
      // }
    },
    // resetSortList () {
    //   this.$$comfirm('确认恢复排序吗', r => {
    //     if (this.oldSortedIcons) {
    //       this.icons = this.oldSortedIcons
    //     }
    //   })
    // },
    resetAll () {
      this.$$comfirm('确认恢复初始设置吗', r => {
        if (this['oldIcons' + this.iconDisplayType]) {
          this['icons' + this.iconDisplayType] = this['oldIcons' + this.iconDisplayType]
        }
      })
    },
    hasParent (dom, parentDom) {
      while (true) {
        if (!dom || dom === document) {
          return false
        }
        if (dom === parentDom) {
          return true
        }
        dom = dom.parentElement
      }
    },
    findBox1 (dom) {
      while (true) {
        if (!dom || dom === document) {
          return null
        }
        if (dom.classList.contains('box1')) {
          return dom
        }
        dom = dom.parentElement
      }
    },
    imgIcon (icon) {
      if (icon.iconType === 2) {
        return this.imgUrl(icon.customIcon || icon.imgSrc)
      }
      return icon.imgSrc
    },
    onMouseEnter (target) {
      if (!target.classList.contains('active')) {
        target.classList.add('active')
      }
    },
    onMouseLeave (target) {
      if (target.classList.contains('active')) {
        target.classList.remove('active')
      }
    },
    loadIcons () {
      this.oldIcons1 = []
      this.oldIcons2 = []
      this.oldIcons3 = []
      this.icons1.forEach(el => {
        this.oldIcons1.push(Object.assign({}, el))
      })
      this.icons2.forEach(el => {
        this.oldIcons2.push(Object.assign({}, el))
      })
      this.icons3.forEach(el => {
        this.oldIcons3.push(Object.assign({}, el))
      })
      this.isLoading = true
      this.$get('/admin/custom-page-setting/query-by-page-id', { pageId: 2 })
        .then(data => {
          this.isLoading = false
          if (data && data.setting) {
            const settings = JSON.parse(data.setting)
            this.iconDisplayType = settings.iconDisplayType || 1
            if (this.iconDisplayType === 1) {
              this.icons1 = settings.icons
            } else if (this.iconDisplayType === 2) {
              this.icons2 = settings.icons
            } else if (this.iconDisplayType === 3) {
              this.icons3 = settings.icons
            }
          }
        })
        .catch(_ => {
          this.isLoading = false
        })
    },
    handleUploadCoverSuccess (res) {
      if (res.errcode === 0) {
        this.currentSelectedItem.customIcon = res.info
      } else {
        this.$message.error(res.msg)
      }
    },
    checkLogin () {
      this.$get('/admin/admin/check_login')
    },

    toggleSubSelectedItem (item) {
      this.currentSelectedItem = item
    },
    toggleTopSelectedItem (item) {
      item.selected = true
      this.currentSelectedItem = item
    },
    draggablend (evt) {},
    // addSubMenu (item) {
    //   if (!item.subButtons) {
    //     item.subButtons = []
    //   }
    //   item.subButtons.push({
    //     name: '导航项名称',
    //     type: 'view'
    //   })
    //   this.currentSelectedItem = item.subButtons[item.subButtons.length - 1]
    // },
    queryIcons () {
      return this['icons' + this.iconDisplayType]
    },
    saveAndSubmit () {
      this.isLoading = true
      this.$post('/admin/custom-page-setting/save-setting', {
        setting: JSON.stringify({ icons: this.queryIcons(), iconDisplayType: this.iconDisplayType }),
        pageId: 2
      })
        .then(data => {
          this.isLoading = false
          this.$$notify('发布成功')
        })
        .catch(_ => {
          this.isLoading = false
        })
    }
  }
}
</script>

<style scoped  lang="scss">
.sub_pre_menu_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile_bd /deep/ .active {
  border: 1px dashed #999;
}

.hbzq-title {
  margin-top: 0.4267rem;
  width: 100%;
  margin-bottom: 0.36rem;
}
.box1 {
  border: 1px solid transparent;
  box-sizing: border-box;
}
.mobile_bd /deep/ .active > .box1-pen {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #000;
  cursor: pointer;
  width: 22px;
  height: 22px;
  background-image: url("../../assets/wechat/pen.png");
  background-position: 5px 5px;
  background-size: 12px auto;
  background-repeat: no-repeat;
}
.himg-img-big {
  height: 5.813rem !important;
}
.mobile_bd /deep/ .active .box1-pen:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.menu_setting_area:after {
  clear: both;
  content: "\200B";
  display: block;
  height: 0;
}

.tip-count {
  position: absolute;
  right: -0.12rem;
  top: -0.05rem; // width: 0.36rem;
  color: #f20b01; // border: 1px solid #f20b01;
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.3rem;
  text-align: center; // border-radius: 50%;
  // background-color: #fff;
  color: #f20b01;
}

.user-qrcode2 {
  width: 0.8rem;
  height: 0.8rem;
}

.himg-area {
  overflow: hidden;
}
.himg {
  width: 4.573rem;
  // height: 2.88rem;
  float: left;
}
.box2 {
  width: 100% !important;
  // width: 9.2rem;
  height: 4.173rem;
}
.himg-img {
  width: 100%;
  height: 100%;
}
.himg:last-child {
  float: right;
}

.app-container-menus {
  width: 220px;
  float: left;
}
.menu_preview_area .sub_pre_menu_inner {
  display: block;
  border-top: 1px solid #e7e7eb;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 50px;
  white-space: nowrap;
  word-wrap: normal;
  cursor: pointer;
}

.pre_menu_item {
  position: relative;
  float: left;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
}
.box1,
.rel {
  position: relative;
}

.menu_form_bd {
  font-size: 14px;
}

.pre_menu_item a.current {
  border: 1px solid #44b549;
  line-height: 48px;
  background-color: #fff;
  color: #44b549;
}

.pre_menu_item:nth-child(n + 2) {
  border-left: 1px solid #e7e7eb;
}

.himg-img-small {
  margin-bottom: 0.027rem;
  height: 2.893rem !important;
}
.himg-img-small:last-child {
  margin-bottom: 0;
}
.menu_preview_area {
  float: left;
  margin-right: 12px;
  position: relative;
}

.mobile_bd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 64px;
}
.menu_form_area {
  display: table-cell;
  vertical-align: top;

  float: none;
  width: auto;
  *display: block;
  *zoom: 1;
}
.xdicon {
  width: 100%;
  height: 100%;
}

.mobile_menu_preview {
  position: relative;
  width: 416px;
  user-select: none;
  height: 738px;
  background: transparent url("../../assets/icons/wxbg.png") no-repeat 0 0;
  background-size: 100% 64px;
  background-position: 0 0;
  border: 1px solid #e7e7eb;
}
.toolbar-area {
  padding-top: 15px;
}
.avatar-uploader,
.avatar-uploader-icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
}

.mobile_menu_preview .mobile_hd {
  color: #fff;
  text-align: center;
  padding-top: 35px;
  font-size: 15px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin: 0 30px;
}

.menu_preview_area .pre_menu_list {
  position: absolute;
  bottom: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #e7e7eb;
  background: transparent url(../../assets/wechat/bg_mobile_foot.png) no-repeat
    0 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-left: 43px;
}

.onlyone-li {
  float: none;
  width: auto;
  overflow: hidden;
  *zoom: 1;
  *overflow: visible;
}

.menu_preview_area .pre_menu_list .pre_menu_item .pre_menu_link {
  border: 1px solid #44b549;
  color: #44b549;
}

.pre_menu_item a {
  display: block;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  color: #616161;
  text-decoration: none;
}

.menu_preview_area .icon14_menu_add {
  background: url(../../assets/wechat/index.png) 0 0 no-repeat;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -2px;
}

.menu_preview_area .pre_menu_list.no_menu .icon14_menu_add {
  background: url(../../assets/wechat/index.png) 0 -18px no-repeat;
}

.menu_preview_area .pre_menu_item {
  line-height: 50px;
}

.sub_pre_menu_box .arrow {
  position: absolute;
  left: 50%;
  margin-left: -6px;
}

.menu_preview_area .sub_pre_menu_box {
  bottom: 60px;
  background-color: #fafafa;
  border-top-width: 0;
}

.sub_pre_menu_box {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  border: 1px solid #d0d0d0;
  background-color: #fff;
}

.sub_pre_menu_box .arrow_out {
  bottom: -6px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #d0d0d0;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_in {
  bottom: -5px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #fafafa;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_in {
  bottom: -5px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #fafafa;
  border-top-style: solid;
}

.sub_pre_menu_box .arrow_out {
  bottom: -6px;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: dashed;
  border-color: transparent;
  border-bottom-width: 0;
  border-top-color: #d0d0d0;
  border-top-style: solid;
}

.pre_menu_item .icon_menu_dot {
  background: url(../../assets/wechat/index.png) 0 -36px no-repeat;
  width: 7px;
  height: 7px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
  margin-top: -2px;
  *margin-top: 0;
}

.menu_form_area:after {
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
  visibility: hidden;
  clear: both;
  height: 0 !important;
  display: block;
  line-height: 0;
}

.portable_editor.to_left {
  padding-left: 12px;
}

.portable_editor {
  position: relative;
}

.menu_form_area .editor_inner {
  height: 738px;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.portable_editor .editor_inner {
  padding: 0 20px 5px;
  background-color: #f4f5f9;
  border: 1px solid #e7e7eb;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.menu_form_hd {
  padding: 15px 0;
  font-size: 14px;
  border-bottom: 1px solid #e7e7eb;
}

.global_mod.float_layout .global_info {
  float: left;
}

.global_mod .global_extra {
  text-align: right;
}

.global_mod .global_extra a {
  color: #576b95;
}

.global_mod.float_layout:after {
  content: "\200B";
  display: block;
  height: 0;
  clear: both;
}

.menu_form_hd h4 {
  font-weight: 400;
  padding: 0;
  margin: 0;
}

.tips_global {
  color: #8d8d8d;
}

.menu_form_area .msg_sender_tips {
  padding-top: 15px;
}

.portable_editor .frm_control_group {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 0;
}

.portable_editor .frm_control_group {
  margin-bottom: 10px;
}

.portable_editor.to_left .editor_arrow_out {
  left: 0;
}

.portable_editor.to_left .editor_arrow_wrp {
  left: 0;
  top: 20px;
}

.menu_form_area .portable_editor.to_left .editor_arrow_wrp {
  top: 645px;
}

.portable_editor.to_left .editor_arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 12px;
  border-style: dashed;
  border-color: transparent;
  border-left-width: 0;
  border-right-color: #e7e7eb;
  border-right-style: solid;
}

.portable_editor .editor_arrow_wrp,
.portable_editor .editor_arrow {
  position: absolute;
}

.portable_editor.to_left .editor_arrow_in {
  left: 1px;
  border-right-color: #f4f5f9;
}

.toolbar {
  text-align: center;
  padding: 30px;
}
.menu_holder {
  overflow: hidden;
  padding: 20px 0;
}
.label {
  float: left;
  width: 100px;
  padding-top: 11px;
}
.label-content {
  width: auto;
  overflow: hidden;
}

.label-content-input {
  width: 400px;
}
.label-content-tip {
  color: #8d8d8d;
  padding-top: 10px;
}
.label-content-error {
  color: red;
  padding-top: 10px;
}
.label-n {
  padding: 0;
}
.edit-box-tip {
  color: #8d8d8d;
  padding-bottom: 20px;
}
.edit-box {
  background-color: #fff;
  padding: 20px;
}

$swiper1Height: 4.14rem;

.swiper {
  height: $swiper1Height;
  position: relative;
  z-index: 100;
  margin-bottom: 0.2rem;
}

.swiper .mint-swipe-indicators {
  bottom: 1.2rem;
}

.banners {
  //   height: 4.44rem;
  height: $swiper1Height;
}

.banners2 {
  height: 4.0458rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.banners2 img {
  height: 4.0458rem;
  width: 100%;
}

.swpier2 {
  height: 4.0458rem;
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
}

.bottombar-img {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../assets/icons/bottombar@2x.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left bottom;
  z-index: 100;
  height: 1.04rem;
  width: 100%;
}

.banners img {
  height: $swiper1Height;
  width: 100%;
}

.img-edit-area {
  padding: 20px 0 10px 0;
}
.hr15 {
  height: 0.36rem;
}

.topbar-img {
  width: 100%;
  position: absolute;
  bottom: -0.15rem;
  height: 1.04rem;
  left: 0;
  background-image: url("../../assets/icons/topbar@2x.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left top;
}
.avartar-img-wrapper {
  width: 1.12rem;
  height: 1.12rem;
}
.avartar-img {
  width: 1.12rem;
  height: 1.12rem;
  border: solid 2px #036b46;
  border-radius: 50%;
}

div.ib {
  position: relative;
  z-index: 1000;
}

.horizontal-center {
  // display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 4.75rem;
  bottom: 4.0458rem;
  // flex-direction: column;
  // justify-content: center;
}
.horizontal-center::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  clear: both;
}

.cx {
  padding: 0.5733rem 0.36rem 0 0.36rem;
  .cx-left {
    width: 4.573rem;
    height: 2.88rem;

    .cx-left-xsqq {
      width: 100%;
      background-color: #e5fcf4;
      height: 2.88rem;
      box-sizing: border-box;
      .xsqg-title-img {
        margin-left: 0.9733rem;
        width: 2.6667rem;
        display: block;
      }
      .time-left-str {
        text-align: center;
        margin-top: 0.32rem;
        text-align: center;
        justify-content: center;
        .time-str {
          width: 0.52rem;
          height: 0.64rem;
          line-height: 0.64rem;
          background-color: #000000;
          border-radius: 0.0533rem;
          color: #ffffff;
          font-size: 0.2933rem;
        }
        .time-seprator {
          width: 0.32rem;
          font-size: 0.2933rem;

          height: 0.64rem;
          line-height: 0.64rem;
        }
      }
      .xsqg-img {
        width: 3.0933rem;
        height: 1.4667rem;

        display: block;
        margin: 0 auto;
        margin-top: 0.5467rem;
      }
    }
  }
  .xsqg-goods-title {
    font-size: 0.36rem;
    color: #17402a;
    padding-top: 0.6533rem;
    text-align: center;
  }
  .cx-right-top {
    width: 4.5733rem;
    height: 2.8933rem;
    background-color: #d5e7f3;
    position: relative;
    .jrpt-img {
      width: 1.8933rem;
      height: 0.4933rem;
      margin-top: 0.5067rem;
      margin-left: 0.1067rem;
    }
    .group-goods-title {
      font-size: 0.2933rem;
      padding-top: 0.3333rem;
      color: #17402a;
      width: 2.2667rem;
      text-align: right;
    }
    .group-goods-desc {
      padding-top: 0.12rem;
      font-size: 0.2133rem;
      color: #17402a;
    }
    .group-img {
      position: absolute;
      width: 1.8933rem;
      height: 1.8933rem;
      top: 0.68rem;
      right: 0.3733rem;
    }
  }
  .cx-right-bottom {
    width: 4.5733rem;
    position: relative;
    height: 2.8933rem;
    background-color: #f5ecdd;
    margin-top: 0.0267rem;
    .tjzc-img {
      width: 1.8933rem;
      height: 0.4933rem;
      margin-top: 0.5067rem;
      margin-left: 0.1067rem;
    }

    .group-goods-title {
      font-size: 0.2933rem;
      padding-top: 0.3333rem;
      color: #17402a;
      width: 2.44rem;
      text-align: right;
    }
    .group-goods-desc {
      padding-top: 0.12rem;
      font-size: 0.2133rem;
      color: #17402a;
    }
    .tjzq-img {
      position: absolute;
      width: 0.7467rem;
      height: 1.9867rem;
      top: 0.5733rem;
      right: 0.9333rem;
    }
  }
}
.hbzq-title {
  margin-top: 0.4267rem;
  width: 100%;
  margin-bottom: 0.36rem;
}
.list-items {
  .list-item {
    width: 100%;
    margin-bottom: 0.32rem;
  }
}
</style>
